import React, { Component } from 'react'
import { LinkIcon, DeleteBtn, FileName } from './styled';
import linkIcon from '@/assets/images/archives/link.png';
import deleteIcon from '@/assets/images/archives/delete.png';
import ImgViewer from '@/components/ImgViewer';

interface IProps {
  fileName: string;
  fileUrl?: string;
  onClick?: Function;
  showDelBtn?: boolean;
  isImg?: boolean;
}

export default class Resource extends React.PureComponent<IProps, any> {

  render() {
    const { fileName, fileUrl, onClick, showDelBtn, isImg = true } = this.props;
    return (
      <>
        <LinkIcon src={linkIcon} />

        {isImg ?
          <FileName like="button">
            <ImgViewer url={fileUrl} hasText={fileName} />
          </FileName>
          :
          <FileName target="_blank" href={fileUrl}>{fileName}</FileName>}

        {showDelBtn && <DeleteBtn src={deleteIcon} like="button" onClick={onClick} />}
      </>
    )
  }
}